<template>
<a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">欢迎你，{{ username }}
        <leftmenu :menu_number='2'></leftmenu>
      </div>
          </a-layout-sider>
                  <a-layout>
<headmenu></headmenu>
          <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >



    <h2>添加工单类型</h2>
               
    <a-form-item label="工单类型" v-bind="formlayout">
      <a-input v-model="workname" placeholder="请输入用户名"></a-input>
    </a-form-item>



    <a-form-item
      label="工单字段"
      v-bind="formlayout"
      v-for="(item, index) in work_fields"
      :key="index+'1'"
    >
      <a-input v-model="work_fields[index]" placeholder="输入自定义字段">
      </a-input>

      <a-icon
        class="dynamic-delete-button"
        type="minus-circle-o"
        @click="work_down(index)"
      />
    </a-form-item>

    <center>
      <a-button type="dashed" style="width: 40%" @click="work_up">
        <a-icon type="plus" /> Add field
      </a-button>
    </center>


    <a-form-item
      label="审批人"
      v-bind="formlayout"
      v-for="(item, index) in approver_id"
      :key="index"
    >
      <a-input v-model="approver_id[index]" placeholder="输入自定义字段">
      </a-input>

      <a-icon
        class="dynamic-delete-button"
        type="minus-circle-o"
        @click="approve_down(index)"
      />
    </a-form-item>

    <center>
      <a-button type="dashed" style="width: 40%" @click="approve_up">
        <a-icon type="plus" /> Add field
      </a-button>


      

    </center>

    <!-- <center>
      <b>审批人</b>
      <select
        v-model="approver_id[index]"
        v-for="(i, index) in approver_id"
        :key="index"
      >
        <option :value="i.uid" v-for="i in approver" :key="i.id">
          {{ i.nickname ? i.nickname : i.username }}
        </option>
      </select>
    </center> -->

    <a-form-item v-bind="buttonlayout">
      <a-button type="primary" @click="addwork">添加</a-button>
    </a-form-item>
    </a-layout-content>
  </a-layout>
          </a-layout>
</template>

<script>
import { get_user, post_work } from "./axios_http/api";
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from './headmenu.vue';
export default {
  data() {
    return {
      collapsed: false,
      username: localStorage.getItem("username"),
      child: "",
      workname: "",
      work_fields: ["", "", ""],
      approver: [],
      approver_num: [1],
      approver_id: [""],
      // 表单样式
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },
      // 按钮样式
      buttonlayout: {
        // 按钮
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        },
      },
    };
  },
  methods: {
    //转换为json
    zh_json(){
      for(var i=0;i < this.work_fields.length; i++){
        this.work_fields[i] = JSON.stringify(this.work_fields[i])
      }
    },
    // 审批人id减1
    approve_down(index){
      if(this.approver_id.length > 1){
        this.approver_id.splice(index,1)
      }
    },
    // 审批人id列表加1
    approve_up(){
      this.approver_id.push("")
    },

    // 工单列表加1
    work_up() {
      this.work_fields.push("");
    },
    work_down(index) {
      if (this.work_fields.length > 1) {
        this.work_fields.splice(index, 1);
      }
    },
    addwork() {
      // this.zh_json()
        let data = {
            name: this.workname,
            custom: this.work_fields,
            approver: this.approver_id
        }
        post_work(data).then((resp) => {
            console.log(resp)
        })
        
    }
  },
    components: {
    leftmenu: leftmenu,
    headmenu:headmenu,
  },
  created() {
    get_user().then((resp) => {
      console.log(resp)
      if (resp.code == 200) {
        console.log(resp);
        this.approver = resp.data;
      }
    });
  },
};
</script>